<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .myul {
            list-style-type: none;
            padding: 15px 20px;
            margin: 0px auto;
        }

        .myul > li {
            float: left;
            margin-left: 10px;
        }

        .myul a {
            text-decoration: none;
            display: block;
            width: 80px;
            height: 80px;
        }

        /*必须给长宽*/
        .oneDiv {
            width: 100%;
            height: 50px;
            background: black;
            /*固定定位*/
            position: fixed;
            top: 0px;
            left: 0px;
        }

        .twoDiv {
            width: 800px;
            height: 50px;
            margin: 0px auto;
            background: red;
        }

    </style>
</head>
<body>
<!--1.清除所有标签的内外间距-->
<div class="oneDiv">
    <div class="twoDiv">
        <ul class="myul">
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
    </div>
</div>
<img style="margin-top: 100px"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.minipic.eastday.com%2F20161117%2F20161117102630_9d4c0a61f06658fdfeb8cef52a71113b_3.jpeg&refer=http%3A%2F%2F00.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611326124&t=c5a9277e3ca07d108b78bb4fce0ad0c2"/>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.minipic.eastday.com%2F20161117%2F20161117102630_9d4c0a61f06658fdfeb8cef52a71113b_3.jpeg&refer=http%3A%2F%2F00.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611326124&t=c5a9277e3ca07d108b78bb4fce0ad0c2"/>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.minipic.eastday.com%2F20161117%2F20161117102630_9d4c0a61f06658fdfeb8cef52a71113b_3.jpeg&refer=http%3A%2F%2F00.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611326124&t=c5a9277e3ca07d108b78bb4fce0ad0c2"/>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.minipic.eastday.com%2F20161117%2F20161117102630_9d4c0a61f06658fdfeb8cef52a71113b_3.jpeg&refer=http%3A%2F%2F00.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611326124&t=c5a9277e3ca07d108b78bb4fce0ad0c2"/>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.minipic.eastday.com%2F20161117%2F20161117102630_9d4c0a61f06658fdfeb8cef52a71113b_3.jpeg&refer=http%3A%2F%2F00.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611326124&t=c5a9277e3ca07d108b78bb4fce0ad0c2"/>
</body>
</html>
